<%
String sPk = "'"+request.getParameter("PK")+"'";
String sUsuario =  "'"+request.getParameter("User")+"'";
String regresar = "'"+request.getParameter("Padre")+"'";
String tituloCorto = "'"+request.getParameter("Titulo")+"'";
String bWf = "'"+request.getParameter("bWf")+"'";
String sCtgName = "'"+request.getParameter("sCtgName")+"'";
%>
<html>
	<head>
		<meta http-equiv="X-UA-Compatible" content="IE=7" />
		<title>Ver pack</title>
		<script type="text/javascript"  src="/suppliers/js/dojo-release-1.6.1/dojo/dojo.js" djConfig="parseOnLoad:true"></script> 
		<script type="text/javascript">
		
			//IMPORTACION DE LIBRERIAS
			dojo.require("dijit.dijit"); // optimize: load dijit layer
			dojo.require("dijit.form.Form");
			dojo.require("dijit.form.Button");
			dojo.require("dijit.form.TextBox");
			dojo.require("dijit.form.DateTextBox");
			dojo.require("dijit.form.Select");
			dojo.require("dijit.form.ComboBox");
			dojo.require("dijit.form.FilteringSelect");
			dojo.require("dijit.Declaration");
			
			//Librerias Grid
			dojo.require("dojox.grid.EnhancedGrid");
			dojo.require("dojo.data.ItemFileReadStore");
			dojo.require("dojox.grid.enhanced.plugins.IndirectSelection");
			dojo.require("dojox.grid.enhanced.plugins.Pagination"); 
			dojo.require("dojo.data.ItemFileWriteStore");
			dojo.require("dijit.layout.SplitContainer");
            dojo.require("dijit.layout.TabContainer");
            dojo.require("dijit.layout.ContentPane");
            dojo.require("dijit.TitlePane");
			dojo.require("dijit.Dialog");
			//Create Tree
			dojo.require("dojo.data.ItemFileReadStore");				
			dojo.require("dijit.tree.TreeStoreModel");
			dojo.require("dijit.Tree");
			
			//Librerias LazyTreeGrid
			dojo.require("dojox.grid.LazyTreeGrid");
			dojo.require("dijit.tree.ForestStoreModel");

			//Libreria JSON
			dojo.require("dojox.json.ref");

//-----------------------INICIO BLOQUE CONTROL VISUALIZACION DE DIVISIONES----------------------------
			// function getStyleObject(string) -> returns style object
			//  given a string containing the id of an object
			//  the function returns the stylesheet of that object
			//  or false if it can't find a stylesheet.  Handles
			//  cross-browser compatibility issues.
			function getStyleObject(objectId) {
				// checkW3C DOM, then MSIE 4, then NN 4.
				if(document.getElementById && document.getElementById(objectId)) {
				return document.getElementById(objectId).style;
				}
				else if (document.all && document.all(objectId)) {
					return document.all(objectId).style;
				} 
				else if (document.layers && document.layers[objectId]) {
					return document.layers[objectId];
				} else {
					return false;
				}
			}
			function changeObjectVisibility(objectId, newVisibility) {
				// first get a reference to the cross-browser style object
				// and make sure the object exists
				var styleObject = getStyleObject(objectId);
				if(styleObject) {
					styleObject.visibility = newVisibility;
					return true;
				} else {
					// we couldn't find the object, so we can't change its visibility
					return false;
				}
			}
			function hideElement(ele_id)
			{
				changeObjectVisibility(ele_id,"hidden");
			}
			function showElement(ele_id)
			{
				changeObjectVisibility(ele_id,"visible");
			}
//---------------------FIN DEL BLOQUE DE CONTROL DE VISUALIZACION DE DIVISIONES-------------------
	
			function verPacks() {
				
				
				var pkSociedad = dijit.byId("sociedadesSelect").get("value");
				var sPk = <%=sPk%>;
				var packsListJSON;
				var bWf = <%=bWf%>;
				var sCtgName = <%=sCtgName%>;
				
				
				
				try {
					dojo.xhrGet({					
						url: "/obtenerDatos.wpc",
						handleAs: 'json',
						sync: true,
						timeout: 60000,
						content:{pkArticulo: sPk, pkSociedad: pkSociedad, sbWf: bWf, sCtgName: sCtgName},
						load: function(response, ioArgs){
							if(response=="") {
				        		alert('El articulo no es un pack en esa sociedad');
				        	}
				        	else {				        	
				        		
				        		packsListJSON = {identifier: "pk", label: "orden", items: response};			        		
				        		
	  			        		var store = new dojo.data.ItemFileReadStore({ data: packsListJSON});
				        		store.fetch({onComplete: function(items) {
										//alert("num. items="+items.length);
							
						    		
									}					
								});
	  						
	 						}
							return true;
				        },
				        error: function(response, ioArgs){
				        	//alert(response);
				          	console.log("HTTP status code: ", ioArgs.xhr.status);
				          	return null;
				        }
					});
					
				    var storePacks = new dojo.data.ItemFileReadStore({ data: packsListJSON}); 
				    var model = new dijit.tree.ForestStoreModel({store: storePacks, childrenAttrs: ['children']});
				    var layout = [
				      {name: 'Imagen', field: 'imagen', width: '10%'},
				      {name: 'Clave', field: 'clave', width: '10%'},
				      {name: 'Titulo', field: 'titulo', width: '20%'},
				      {name: 'Unidades', field: 'unidades', width: '10%'},
				      {name: 'ISBN', field: 'isbn', width: '10%'},
				      {name: 'Sello', field: 'sello', width: '10%'},
				      {name: 'Tipo de Producto', field: 'tipoproducto', width: '20%'},
				      {name: 'Estado', field: 'estado', width: '10%'}
				    ];
				    
				    function styleSubpack(row) {				    							    
				    		
					       var item = lazyGrid.getItem(row.index);
					       
					       if(item) {
					    	  
					          var children = storePacks.getValue(item, "children", null);
					          if(children == null) {
					        	  row.customStyles += "font-weight: normal;font-size: 14px;";
					          }
					          else {
					        	 
					        	  row.customStyles += "font-weight: bold;font-size: 14px;";
					        	 
					        	  
					          }
					       }
					      
					       lazyGrid.focus.styleRow(row);
					       lazyGrid.edit.styleRow(row);
				    }		
				    
				    var lazyGrid = new dojox.grid.LazyTreeGrid(
				    	{
				        	id: 'grid',
				        	treeModel: model,
				        	structure: layout,
				        	onStyleRow: styleSubpack,
				        	defaultOpen:true,
				        	openAtLevels:[]
				        
				      	}, 
				      	
				      	document.createElement('div3')
				      	
				    );
				    
				    dojo.byId("gridDiv").appendChild(lazyGrid.domNode);

				    lazyGrid.startup();				   
				   
				}
				catch(err) {
					alert(" Error en ExtenderArticulo: " + err.message);
				}
			}
	
			function crearLazyTreeGrid() {
				
				var data = { 
						identifier: 'pk',
				        label: 'orden',
				        items: [
				          { pk: '1', orden:'1', imagen:'<img src=\"/suppliers/Santillana/ctg_files/santillana.jpg\" alt=\"Imagen del articulo.\" width=\"22\" height=\"22\">', titulo:'Matematicas', isbn:'4365', children:[
					      		{ pk: '1.1', orden:'1', imagen:'<img src=\"/suppliers/Santillana/ctg_files/santillana.jpg\" alt=\"Imagen del articulo.\" width=\"22\" height=\"22\">', titulo:'Cuaderno actividad 1', isbn:'4365' },
					          	{ pk: '1.2', orden:'2', imagen:'<img src=\"/suppliers/Santillana/ctg_files/santillana.jpg\" alt=\"Imagen del articulo.\" width=\"22\" height=\"22\">', titulo:'Cuaderno actividad 2', isbn:'4365', children:[
					          		{ pk: '1.2.1', orden:'1', imagen:'<img src=\"/suppliers/Santillana/ctg_files/santillana.jpg\" alt=\"Imagen del articulo.\" width=\"22\" height=\"22\">', titulo:'General', isbn:'4365' },
					          		{ pk: '1.2.2', orden:'2', imagen:'<img src=\"/suppliers/Santillana/ctg_files/santillana.jpg\" alt=\"Imagen del articulo.\" width=\"22\" height=\"22\">', titulo:'Repaso', isbn:'4365' } 
					      		]},
				          		{ pk: '1.3', orden:'3', imagen:'<img src=\"/suppliers/Santillana/ctg_files/santillana.jpg\" alt=\"Imagen del articulo.\" width=\"22\" height=\"22\">', titulo:'Calculadora', isbn:'4365', children:
				          			{ pk: '1.3.1', orden:'1', imagen:'<img src=\"/suppliers/Santillana/ctg_files/santillana.jpg\" alt=\"Imagen del articulo.\" width=\"22\" height=\"22\">', titulo:'Funda', isbn:'4365' }
				          		} 
					      ]},
				          { pk: '2', orden:'2', imagen:'<img src=\"/suppliers/Santillana/ctg_files/santillana.jpg\" alt=\"Imagen del articulo.\" width=\"22\" height=\"22\">', titulo:'Literatura', isbn:'4365', children:[
				              { pk: '2.1', orden:'1', imagen:'<img src=\"/suppliers/Santillana/ctg_files/santillana.jpg\" alt=\"Imagen del articulo.\" width=\"22\" height=\"22\">', titulo:'Gramatica', isbn:'4365' },
				              { pk: '2.2', orden:'2', imagen:'<img src=\"/suppliers/Santillana/ctg_files/santillana.jpg\" alt=\"Imagen del articulo.\" width=\"22\" height=\"22\">', titulo:'El Quijote', isbn:'4365' },
				              { pk: '2.3', orden:'3', imagen:'<img src=\"/suppliers/Santillana/ctg_files/santillana.jpg\" alt=\"Imagen del articulo.\" width=\"22\" height=\"22\">', titulo:'Fuenteovejuna', isbn:'4365' },
				              { pk: '2.4', orden:'4', imagen:'<img src=\"/suppliers/Santillana/ctg_files/santillana.jpg\" alt=\"Imagen del articulo.\" width=\"22\" height=\"22\">', titulo:'La Colmena', isbn:'4365' } ]
				          },
				          { pk: '3', orden:'3', imagen:'<img src=\"/suppliers/Santillana/ctg_files/santillana.jpg\" alt=\"Imagen del articulo.\" width=\"22\" height=\"22\">', titulo:'Sciences', isbn:'4365', children:
				          	{ pk: '3.1', orden:'1', imagen:'<img src=\"/suppliers/Santillana/ctg_files/santillana.jpg\" alt=\"Imagen del articulo.\" width=\"22\" height=\"22\">', titulo:'Telescopio', isbn:'4365'}
				          },
				          { pk: '4', orden:'4', imagen:'<img src=\"/suppliers/Santillana/ctg_files/santillana.jpg\" alt=\"Imagen del articulo.\" width=\"22\" height=\"22\">', titulo:'Dibujo Tecnico', isbn:'4365', children:[
					          { pk: '4.1', orden:'1', imagen:'<img src=\"/suppliers/Santillana/ctg_files/santillana.jpg\" alt=\"Imagen del articulo.\" width=\"22\" height=\"22\">', titulo:'Regla', isbn:'4365' },
					          { pk: '4.2', orden:'2', imagen:'<img src=\"/suppliers/Santillana/ctg_files/santillana.jpg\" alt=\"Imagen del articulo.\" width=\"22\" height=\"22\">', titulo:'Escuadra', isbn:'4365' },
					          { pk: '4.3', orden:'3', imagen:'<img src=\"/suppliers/Santillana/ctg_files/santillana.jpg\" alt=\"Imagen del articulo.\" width=\"22\" height=\"22\">', titulo:'Rotulador', isbn:'4365' },
					          { pk: '4.4', orden:'4', imagen:'<img src=\"/suppliers/Santillana/ctg_files/santillana.jpg\" alt=\"Imagen del articulo.\" width=\"22\" height=\"22\">', titulo:'Compas', isbn:'4365' } 
					      ]},
				          { pk: '5', orden:'50', imagen:'<img src=\"/suppliers/Santillana/ctg_files/santillana.jpg\" alt=\"Imagen del articulo.\" width=\"22\" height=\"22\">', titulo:'Historia', isbn:'4365', children:[
				          		{ pk: '5.1', orden:'10', imagen:'<img src=\"/suppliers/Santillana/ctg_files/santillana.jpg\" alt=\"Imagen del articulo.\" width=\"22\" height=\"22\">', titulo:'Mapa Europa', isbn:'4365' },
				          		{ pk: '5.2', orden:'20', imagen:'<img src=\"/suppliers/Santillana/ctg_files/santillana.jpg\" alt=\"Imagen del articulo.\" width=\"22\" height=\"22\">', titulo:'Mapa Asia', isbn:'4365' },
				          		{ pk: '5.3', orden:'30', imagen:'<img src=\"/suppliers/Santillana/ctg_files/santillana.jpg\" alt=\"Imagen del articulo.\" width=\"22\" height=\"22\">', titulo:'Historia', isbn:'4365', children:[
									{ pk: '5.3.1', orden:'10', imagen:'<img src=\"/suppliers/Santillana/ctg_files/santillana.jpg\" alt=\"Imagen del articulo.\" width=\"22\" height=\"22\">', titulo:'Historia', isbn:'4365', children:[
										{ pk: '5.3.1.1', orden:'10', imagen:'<img src=\"/suppliers/Santillana/ctg_files/santillana.jpg\" alt=\"Imagen del articulo.\" width=\"22\" height=\"22\">', titulo:'Historia', isbn:'4365', children:[
											{ pk: '5.3.1.1.1', orden:'10', imagen:'<img src=\"/suppliers/Santillana/ctg_files/santillana.jpg\" alt=\"Imagen del articulo.\" width=\"22\" height=\"22\">', titulo:'Historia', isbn:'4365'} 
										]}
									]}									
				          		]}
				   		  ]} 
					   ]
				    };
					
				    var store = new dojo.data.ItemFileWriteStore({data: data});				    
				    var model = new dijit.tree.ForestStoreModel({store: store, childrenAttrs: ['children']});
	   
				    var layout = [
				      {name: 'Imagen', field: 'imagen', width: '10%'},
				      {name: 'Clave', field: 'clave', width: '10%'},
				      {name: 'Titulo', field: 'titulo', width: '40%'},
				      {name: 'Unidades', field: 'unidades', width: '40%'},
				      {name: 'ISBN', field: 'isbn', width: '35%'},
				      {name: 'Sello', field: 'sello', width: '15%'},
				      {name: 'Tipo de Producto', field: 'tipoproducto', width: '35%'},
				      {name: 'Estado', field: 'esatado', width: '35%'}
				    ];
				    
				    function styleSubpack(row) {				    							    
				    		
					       var item = lazyGrid.getItem(row.index);
					       
					       if(item) {
					    	  
					          var identificador = store.getValue(item, "id", null);
					          
					          var children = store.getValue(item, "children", null);
					          if(children == null) {
					        	  row.customStyles += "font-weight: normal;font-size: 14px;";
					          }
					          else {
					        	  row.customStyles += "font-weight: bold;font-size: 14px;";
					        	  row.expandedRows;
					        	  row.expandedRows = true;
					          }
					       }
					       
					       lazyGrid.focus.styleRow(row);
					       lazyGrid.edit.styleRow(row);
				    }		
				    
				    var lazyGrid = new dojox.grid.LazyTreeGrid(
				    	{
				        	id: 'grid',
				        	treeModel: model,
				        	structure: layout,
				        	onStyleRow: styleSubpack,
				        	rowSelector: '20px'
				      	}, 
				      	document.createElement('div3')
				    );

				    dojo.byId("gridDiv").appendChild(lazyGrid.domNode);

				    lazyGrid.startup();				   
			}
			
			dojo.addOnLoad(function() {		
				
				
				var sUrl = document.URL;
				var sPk = <%=sPk%>;
				var sociedadesListJSON;
				var bWf = <%=bWf%>;
				var sCtgName = <%=sCtgName%>;

 				dojo.byId("titulocorto").innerHTML = "Titulo del Pack: " + <%=tituloCorto%>;

				dojo.xhrGet({					
					url: "/obtenerSociedadesMapeadasPacks.wpc",
					handleAs: 'json',
					sync: true,
					timeout: 60000,
					content:{PK: sPk,URL: sUrl, BWF: bWf, CTGNAME:sCtgName},
					load: function(response, ioArgs){
			        	if(response=="") {
			        		alert('No hay datos.');
			        	}
			        	else {				        	
			        		//alert(response);
			        		showElement("tp3");
			        		sociedadesListJSON = {identifier: "id", label: "sociedad", items: response};			        		
			        		
/*  			        		var store = new dojo.data.ItemFileReadStore({ data: sociedadesListJSON});
			        		store.fetch({onComplete: function(items) {
									alert("num. items="+items.length);
						
					    			alert("id="+store.getValue(items[0],"id"));
					    			alert("sociedad="+store.getValue(items[0],"sociedad"));
								}					
							});
 */ 						
 						}
			        	return false;
			        },
			        error: function(response, ioArgs){
			        	//alert(response);
			          	console.log("HTTP status code: ", ioArgs.xhr.status);
			          	return null;
			        }
				});

				var storeSociedades = new dojo.data.ItemFileReadStore({ data: sociedadesListJSON});
 				/*storeSociedades.fetch({onComplete: function(items) {
					alert("num. items="+items.length);
		
	    			alert("id="+storeSociedades.getValue(items[0],"id"));
	    			alert("sociedad="+storeSociedades.getValue(items[0],"sociedad"));
					}					
				});*/				
 				
				var cbSociedades = new dijit.form.FilteringSelect({
		            	id: "sociedadesSelect",
		            	name: "sociedades",
		            	store: storeSociedades,
		            	searchAttr: "sociedad",
		            	style: "width: 20em;",
		            	placeHolder: "Seleccionar una sociedad"
 		        	},
		        	"sociedadesSelect"
		     	);
				cbSociedades.startup();
				
	 			//crearLazyTreeGrid();
			});
		</script>				
		
		
        <style type="text/css">
			body, html, table { font-family:helvetica,arial,sans-serif; font-size:83%; }
        </style>
</head>

<link rel="stylesheet" type="text/css" href="/suppliers/js/dojo-release-1.6.1/dijit/themes/claro/claro.css"/>
<style type="text/css">
	@import "/suppliers/js/dojo-release-1.6.1/dojox/grid/enhanced/resources/claro/EnhancedGrid.css";
	@import "/suppliers/js/dojo-release-1.6.1/dojox/grid/enhanced/resources/EnhancedGrid_rtl.css";
	.dojoxGrid table { margin: 0; } html, body { width: 100%; height: 100%; margin: 0; }
	  	@import "/suppliers/js/dojo-release-1.6.1/dijit/themes/claro/layout/ContentPane.css";
	  	@import "/suppliers/js/dojo-release-1.6.1/dijit/themes/claro/layout/TabContainer.css";
	.claro .dijitDialog {
		background: none repeat-x scroll left top #FFFFFF;
	}
	.dijitTitlePaneContentInner .dijitTitlePaneSingleChild{	
		height: 295px!important;
	    width: 100%!important;
	    overflow-x: scroll !important;
	    overflow-y: visible !important;
	}


 </style>
<body class="claro" style="width:100%;height:90%;">
		<script language="JavaScript" 
		
		
		type="text/JavaScript">
		
		
		window.resizeTo(screen.availWidth, 
		screen.availHeight); 
		
		
		window.moveTo(0,0);
		
		
		</script>
	<div style="width: 100%; margin:1em;" >
	
		<img src="/suppliers/MDM/ctg_files/logo.png" alt="Imagen del articulo." width="92" height="22">
		
		<label id="titulo" for="titulo" style="margin-left: 5em;font-size: 150%; font-weight:bold">
			Ver Detalle Packs
		</label>
	</div>

	<div style="border: 0px solid black"></div>
	
	<div style="width: 100%; margin: 1em">
    	<label id="titulocorto" for="titulocorto" ></label>
	</div>

	<div style="width: 100%; margin: 1em">
		<input id="sociedadesSelect">
		
		<button data-dojo-type="dijit.form.Button" data-dojo-props="onClick:function(){verPacks();}" type="button">
		 		Ver Packs
		 </button>
	</div>
	
	<div id="gridDiv" style="width:80%;height:80%;font-size: 130%; margin: 10px;"></div>
	
</body>
	
</html>
